<script>
import render from "./custom/previewRender";
import checkRules from "./custom/rule";

const layouts = {
  colItem(h, element, value) {
    let labelWidth = element.labelWidth ? `${element.labelWidth}px` : null;
    let itemWidth = element.width ? `width:${element.width}%;` : null;
    const rules = checkRules(element);
    const { valChange } = this.$listeners;
    return (
      <el-col style="padding-left: 5px; padding-right: 5px;" class="preview-item">
        <el-form-item
          label={element.showLabel ? element.label : ""}
          label-width={labelWidth}
          prop={element.id}
          rules={rules}
          style={itemWidth}
        >
          <render
            key={element.id}
            conf={element}
            value={value}
            onInput={(event) => {
              this.$set(element, "value", event);
              valChange(element.id, event);
            }}
          />
        </el-form-item>
      </el-col>
    );
  },
};

export default {
  name: "previewItem",
  components: {
    render,
  },
  props: ["model", "value"],
  data() {
    return {
      eleConfig: this.model,
    };
  },
  render(h) {
    return layouts.colItem.call(this, h, this.eleConfig, this.value);
  },
};
</script>
<style scoped>
.el-form-item {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 22px;
}
</style>
